<template>
  <div class="order-list">
    <OrderHeader title="订单列表">
      <template v-slot:tip>
        <span>请谨防钓鱼连接或者诈骗电话，了解更多></span>
      </template>
    </OrderHeader>
    <div class="wrapper">
      <div class="container">
        <div class="order-list-box">
          <Loading v-if="loading"></Loading>
          <div class="list-item" v-for="(order,index) in list" :key="index">
            <div class="item-title">
              <div class="item-info">
                {{order.createTime}}
                <span>|</span>
                {{order.receiverName}}
                <span>|</span>
                {{order.orderNo}}
                <span>|</span>
                {{order.paymentTypeDesc}}
              </div>
              <div class="item-price">
                <span>应付金额</span>
                <span class="price">{{order.payment}}</span>元
              </div>
            </div>
            <div class="item-body">
              <div class="good-box">
                <div class="good-list" v-for="(item,i) in order.orderItemVoList" :key="i">
                  <div class="good-img">
                    <img v-lazy="item.productImage" alt="">
                  </div>
                  <div class="good-name">
                    <div class="phone-name">{{item.productName}}</div>
                    <div class="phone-money">{{item.totalPrice+ 'X'+ item.quantity}}</div>
                  </div>
                </div>
              </div>
              <div class="good-state" v-if="order.status === 20">
                <a href="">{{order.statusDesc}}</a>
              </div>
              <div class="good-state" v-else>
                <a href="javascript:;" @click="gotoPay(order.orderNo)">{{order.statusDesc}}</a>
              </div>
            </div>
          </div>
          <el-pagination
            v-if="true"
            class="pagination"
            background
            layout="prev, pager, next"
            :pageSize="pageSize"
            :total="total"
            @current-change="handleChange"
          >
          </el-pagination>
          <NoData v-if="!loading && list.length === 0"></NoData>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import OrderHeader from '../../components/OrderHeader'
import Loading from '../../components/Loading'
import NoData from '../../components/NoData'
export default {
  name: 'OrderList',
  data () {
    return {
      list: [],
      loading: true,
      pageSize: 10,
      pageNum: 1,
      total: 0,
      showNextPage: true// 加载更多：是否显示按钮
    }
  },
  components: {
    Loading,
    OrderHeader,
    NoData
  },
  methods: {
    getOrderList() {
      this.axios.get('/orders', {
        params: {
          pageSize: 10,
          pageNum: this.pageNum
        }
      }).then((res) => {
        this.list = res.list
        this.loading = false
        this.total = res.total
        this.showNextPage = res.hasNextPage
      })
    },
    gotoPay(orderNo) {
      this.$router.push({
        path: '/order/pay',
        query: {
          orderNo
        }
      })
    },
    handleChange(pageNum) {
      this.pageNum = pageNum
      this.getOrderList()
    }
  },
  mounted () {
    this.getOrderList()
  }
}
</script>

<style lang="scss">
  @import "./../../assets/scss/mixin";

  .order-list {
    .wrapper {
      background-color: #f5f5f5;
      padding-top: 33px;
      padding-bottom: 110px;
      .pagination {
        text-align: right;
      }
      .list-item {
        border: 1px solid #cccccc;
        margin-bottom: 30px;
        .item-title {
          @include flex();
          height: 74px;
          background-color: #fffaf7;
          padding: 0 43px;
          font-size: 16px;
          color: #666;
          .item-info {
            span {
              margin: 0 15px;
            }
          }
          .item-price{
            .price{
              font-size: 26px;
            }
          }
        }
        .item-body {
          @include flex();
          background-color: #fff;
          padding: 0 43px;
          .good-box {
            .good-list {
              display: flex;
              align-items: center;
              margin: 20px 0;
              .good-img {
                width: 112px;
                img {
                  width: 100%;
                }
              }
              .good-name{
                .phone-name,.phone-money{
                  font-size: 20px;
                  color: #333;
                }
              }
            }

          }
          .good-state{
            font-size: 20px;
            a{
              color: #f60;
            }
          }
        }
      }
    }
  }
</style>
